<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    :style=""
    :collapse="this.isCollapse"
    router
    unique-opened
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- <template v-if="menu_data.length>0"> -->
      <template v-for="group_menu of menu_data">
        <auto-menu :groupMenuData="group_menu"></auto-menu>
      </template>
    <!-- </template> -->
  </el-menu>
</template>
<script>
import AutoMenu from "@/pages/home/components/AutoMenu";
import { requestMenu } from '@/api/api'
import { menuUrl } from '@/config/config'
export default {
  name: "Sider",
  props: {
    isCollapse: Boolean
  },
  components: {
    AutoMenu
  },
  mounted () {
    if (this.$store.state.mode !== 'dev') {
      requestMenu(menuUrl).then(data => {
        // console.log(data)
        if (data.rtnCode == '0') {
          //this.menu_data = this.menu_data.concat(data.data);
        } else {
          this.$message({
            message: 'failed to request the menu informations',
            type: 'error'
          });
        }
      }).catch(error => {
        // console.log(error);
      })
    }
  },
  data () {
    return {
      m_isCollapse: this.isCollapse,
      menu_data: [{
        groupTitle: "测试模块",
        submenus: [],
        items: [
          {
            index: "/test",
            title: "什么都往这里放-_-",
            icon: "reporting"
          }
        ]
      },{
        groupTitle: "Home",
        submenus: [],
        items: [
          {
            index: "/main",
            title: "Home Page",
            icon: "reporting"
          }
        ]
      }
        ,
      {
        groupTitle: "Analyzer",
        submenus: [
          {
            index: "/reporting",
            title: "Reporting",
            icon: "reporting",
            items: [
              {
                index: "/kpi",
                title: "KPI/PI"
              },
              {
                index: "/batch_process_parameter_report",
                title: "Batch Process Parameter Report"
              },
              {
                index: "/message_report",
                title: "Message Report"
              }
            ],
            submenus: [
            ]
          },
          {
            index: "/dashboard",
            title: "Dashboard",
            icon: "dashboard",
            items: [
              {
                index: "/spc",
                title: "SPC"
              },
              {
                index: "/dot_graph",
                title: "Dot Graph"
              },
              {
                index: "/benchmark",
                title: "Benchmark"
              }
              ,
              {
                index: "/plant_modulation",
                title: "Plant Modulation"
              }
              ,
              {
                index: "/sankey",
                title: "Sankey"
              }
            ],
            submenus: []
          }
        ],
        items: []
      }
        ,
      {
        groupTitle: "Tracking",
        submenus: [
          {
            index: "/producer_efficiency",
            title: "Producer Efficiency",
            icon: "producer_efficiency",
            items: [
              {
                index: "/heat",
                title: "HEAT"
              },
              {
                index: "/electricity",
                title: "Electricity",
                icon: ''
              },
              {
                index: "/water",
                title: "Water",
                icon: ''
              },
              {
                index: "/co2",
                title: "CO2"
              },
              {
                index: "/air",
                title: "Air"
              },
              {
                index: "/coolant",
                title: "Coolant"
              }
            ],
            submenus: [
            ]
          }
        ],
        items: [
          {
            index: "/batch_parameter",
            title: "Batch Parameter",
            icon: "batch_parameter",
          },
          {
            index: "/kpi_pi",
            title: "KPI/PI",
            icon: "kpi_pi",
          },
          {
            index: "/gops_bpe",
            title: "GOPS/BPE",
            icon: "gops_bpe",
          }
        ]
      }
        ,
      {
        groupTitle: "System Configuration",
        submenus: [],
        items: [
          {
            index: "/physical_modeling",
            title: "Physical Modeling",
            icon: "physical_modeling",
          },
          {
            index: "/process_modeling",
            title: "Process Modeling",
            icon: "process_modeling",
          },
          {
            index: "/data_acquisition",
            title: "Data Acquisition",
            icon: "data_acquisition",
          },
          {
            index: "/user",
            title: "User",
            icon: "user",
          }
        ]
      }]
    };
  },
  methods: {
    handleOpen (key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath);
    },
    handleMouseenter () {
      // if (this.isCollapse == true) {
      // }
      // this.isCollapse = false;
    },
    handleMouseleave () {
      // this.isCollapse = false;
    },
    handleSelect (index, indexPath) {
      // console.log(index);
      // console.log('child', indexPath);
      // this.$emit("select", indexPath);
      console.log(this.$route.path);
    }
  }
};
</script>
<style lang="less" scoped>
body {
  width: 100%;
  height: 100%;
}
.el-menu-vertical-demo {
  // width: 300px;
  // min-width: 300px;
  text-align: left;
  height: 100%;
  //  overflow-y: visible;
  //  overflow-x: hidden;

  scrollbar-base-color: transparent;
  scrollbar-darkshadow-color: transparent;
  scrollbar-highlight-color: transparent;
  scrollbar-face-color: transparent;
}
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 8px;
}
.el-menu-vertical-demo::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.1);
}
.el-menu-vertical-demo::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
/deep/ .el-menu-item:focus {
  color: #6a6a6a;
  background-color: #ebfaf4;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    // width: 15%;
    width: 100%;
    min-height: 400px;
}
.el-menu--collapse {
    min-height: 400px;
    /deep/ .el-submenu__icon-arrow {
      display: none;
    }
    /deep/ span {
      display: none;
    }
}

</style>
